// 路由懒加载的关键：
// 1、动态导入组件：使用React.lazy()实现组件懒加载
// 2、Suspense嵌套策略：
// 布局组件内使用<Suspense>包裹<Outlet>，统一处理子路由加载状态
// 独立路由（如/login）需要单独包裹<Suspense>
// 3、加载状态提示：通过fallback属性指定加载时的占位内容

// 实现效果：
// /home和/user路由：首次访问时才会加载对应组件，加载期间显示"Loading..."
// /login和404页面：作为独立路由单独处理加载状态
// 布局组件保持即时加载，保证导航菜单等静态内容立即可用

import { createBrowserRouter } from "react-router-dom";
import AuthLayout from "../AuthLayout.tsx";
import Setting from "@/pages/My/Setting/index.tsx";
import {lazy} from "react";
// 使用lazy动态导入组件
const Home = lazy(() => import('../pages/Home'));
const User = lazy(() => import('../pages/My/User'));
const Login = lazy(() => import('../pages/Login'));
const NotFound = lazy(() => import('../pages/NotFound'));
const Statistics =lazy(() => import('../pages/Statistics'));
const CalendarJob = lazy(() => import('../pages/CalendarJob'));
const Table = lazy(() => import('../pages/Table'));
const TimeLine = lazy(() => import('../pages/TimeLine'));
// 扩展类型声明（TypeScript需要）
declare module "react-router-dom" {
  interface Handle {
    auth?: boolean;
  }
}

export const routes = createBrowserRouter([
  // 路由配置
  {
    path: "/",
    handle: { auth: true },
    element: <AuthLayout />,
    children: [
      {
        path: "home",
        index: true, // 首页默认子路由
        element: <Statistics />,
        handle: { auth: true }, // 标记需要认证
      },
      // User
      {
        path: "/users/user",
        element: <User />,
        handle: { auth: true },
      },
      {
        path: "/users/setting",
        element: <Setting />,
        handle: { auth: true },
      },
      {
        path: "/sub/calendar",
        element: <CalendarJob />,
        handle: { auth: true },
      },
      {
        path: "/sub/table",
        element: <Table />,
        handle: { auth: true },
      },
      {
        path: "/sub/timeLine",
        element: <TimeLine />,
        handle: { auth: true },
      }
    ],
  },
  { path: "/login", 
    element: <Login />
    // element: (
    //   <Suspense fallback={<div>Loading...</div>}>
    //     <Login />
    //   </Suspense>
    // )
  },
  { path: '/:path(.*)*', element: <NotFound /> }, 
]);
